<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/vue.global.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/axios-helper.js"></script>
    <script src="//unpkg.com/element-plus"></script>
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
</head>
<body>
<div id="app">
    <el-form :inline="true" :model="formInline" size="small" class="demo-form-inline">
        <el-form-item>
            <el-input v-model="computersDto.brand" placeholder="请输入品牌" clearable />
        </el-form-item>
        <el-form-item>
            <el-input v-model="computersDto.price" placeholder="请输入价格" clearable />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" size="small" @click="query">搜 索</el-button>
            <el-button type="success" size="small" @click="add">添加</el-button>
        </el-form-item>
    </el-form>

    <el-row>
        <el-table :data="entities" stripe border style="width: 100%"
                  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" ></el-table-column>

            <el-table-column prop="id" label="id" width="50px"></el-table-column>
            <el-table-column prop="name" label="名称" width="100px"></el-table-column>
            <el-table-column prop="brand" label="品牌" width="100px"></el-table-column>
            <el-table-column prop="price" label="价格" width="100px"></el-table-column>

            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.row)">
                        编辑
                    </el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.row)">
                        <el-icon><Delete /></el-icon>删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--        分页功能-->
        <el-pagination
                v-model:current-page="computersDto.pageNumber"
                v-model:page-size="computersDto.pageSize"
                :page-sizes="[5, 10, 15, 20]"
                :background="true"
                layout="total, sizes, prev, pager, next, jumper"
                :total="computersDto.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
    </el-row>

    <el-dialog v-model="visible4Edit" title="编辑" width="500">
        <el-form :model="entity4Edit">
            <el-form-item label="名称" :label-width="formLabelWidth" prop="name">
                <el-input v-model="entity4Edit.name" autocomplete="off"/>
            </el-form-item>

            <el-form-item label="品牌" :label-width="formLabelWidth" prop="brand">
                <el-input v-model="entity4Edit.brand" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="价格" :label-width="formLabelWidth" prop="price">
                <el-input v-model="entity4Edit.price" autocomplete="off"/>
            </el-form-item>

        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelEdit">取消</el-button>
                <el-button type="primary" @click="Edit">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</div>
<script>
    const {createApp,ref,onMounted} = Vue;
    const app = createApp({
        setup(){
            const entities = ref([]);
            const pageNumber = ref(1)
            const pageSize = ref(5)
            const total = ref(0)
            const computersDto = ref({
                brand:'',
                price:null,
                pageNumber:1,
                pageSize:5,
                total:0
            });

            //分页显示
            const handleSizeChange = val => {
                computersDto.value.pageSize = val;
                query();
            }

            const handleCurrentChange = val => {
                computersDto.value.pageNumber = val;
                query();
            }

            const query = () => {
                axios.post(`/computer/query`,computersDto.value)
                    .then(result => {
                        entities.value = result.data.records;
                        console.log(entities.value)
                        computersDto.value.total = result.data.total;
                    })
                    .catch(errorMsg => {
                        ElementPlus.ElMessage({type:"error",message:errorMsg,showClose:true})
                    })
            }


            //编辑信息
            const visible4Edit = ref(false);
            const entity4Edit = ref({});

            const cancelEdit = () => {
                visible4Edit.value = false;
                entity4Edit.value = {};
            }
            const Edit = () => {
                axios.post('/computer/update',entity4Edit.value)
                    .then(() => {
                        ElementPlus.ElMessage.success("编辑成功")
                        visible4Edit.value=false;
                        entity4Edit.value = {};
                        query();
                    })
                    .catch(errorMsg => {
                        ElementPlus.ElMessage({type:"error",message:errorMsg,showClose:true})
                    })
            }

            const handleEdit = row => {
                let json=JSON.stringify(row);
                entity4Edit.value=JSON.parse(json);
                visible4Edit.value=true;
            }


            //删除信息
            const handleDelete = row => {
                ElementPlus.ElMessageBox.confirm(
                    `您确定要删除${row.name}的信息吗`,
                    '警告',
                    {
                        confirmButtonText: '确认',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                )
                    .then(() => {
                        return axios.delete('/computer/remove?id=' + row.id);
                    }).then(() => {
                    ElementPlus.ElMessage({type: 'success', message: '删除成功！',})
                    query();
                })
                    .catch((errorMsg) => {
                        if (errorMsg == "cancel")
                            return;
                        ElementPlus.ElMessage({type: 'info', message: errorMsg,})
                    })
            }

            onMounted(() =>{
                query();
            })

            return{
                entities,
                pageNumber,
                pageSize,
                total,
                computersDto,
                handleSizeChange,
                handleCurrentChange,
                query,
                handleEdit,visible4Edit,entity4Edit,cancelEdit,Edit,
                handleDelete,
            }
        }
    })

    app.use(ElementPlus);
    app.mount('#app')
</script>
</body>
</html>